<!-- 入库单详情弹窗 -->
<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="`${drawerProps.title}`">
    <el-space direction="vertical">
      <el-descriptions :column="1" title="库存信息" border>
        <el-descriptions-item width="300" label="商品名称">{{ drawerProps.row!.goodsName }}</el-descriptions-item>
        <el-descriptions-item width="300" label="计量单位">{{ drawerProps.row!.measureUnit }}</el-descriptions-item>
        <el-descriptions-item width="300" label="总库存量">{{ drawerProps.row!.totalHold }}</el-descriptions-item>
        <el-descriptions-item width="300" label="可分配量">{{ drawerProps.row!.availableHold }}</el-descriptions-item>
        <el-descriptions-item width="300" label="已分配量">{{ drawerProps.row!.allocatedHold }}</el-descriptions-item>
        <el-descriptions-item width="300" label="退回数量">{{ drawerProps.row!.returnHold }}</el-descriptions-item>
        <el-descriptions-item width="300" label="最大值">{{ drawerProps.row!.maxHold }}</el-descriptions-item>
        <el-descriptions-item width="300" label="预警值">{{ drawerProps.row!.warnHold }}</el-descriptions-item>
        <el-descriptions-item width="300" label="库存更新时间">{{ drawerProps.row!.updateTime }}</el-descriptions-item>
      </el-descriptions>
    </el-space>
  </el-drawer>
</template>

<script setup lang="ts" name="DetailDrawer">
import { ref, onMounted } from "vue";
import { Warehouse } from "@/api/interface";

onMounted(() => {});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Warehouse.InventoryData>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>
